<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>雪碧图的答疑</title>
    <style>
        .cart{
            /*
                 为行内元素设置雪碧图时，一定要使其可以设置宽度和高度
                    display:block;
                    display:inline-block;
                    float:left/right;
                    position:absolute;
            */
            display: block;
            width: 21px;
            height: 15px;

            /* 
                现在大部分的项目中为我们提供的图片都是 2x 或 3x图，提供这种图片为了在高清屏下，图片也可以清晰的显示
                使用2x图时，需要使用css将其缩小到原来的1/2
                同理使用3x图时，需要使用css将其缩小到原来的1/3
            
            */
            background-image: url(./img/global-sprite-32-v1._CB485972286_.png);
            background-position: -29px -169px;
            /* 设置背景图片的尺寸 */
            background-size: 175px;
        }
    </style>
</head>
<body>
    <i class="cart"></i>
    
</body>
</html>